<script setup lang="ts">
import {
  ElButton,
  ElCard,
  ElCol,
  ElImage,
  ElPopconfirm,
  ElRow,
  ElSkeleton,
  ElSpace,
  ElStep,
  ElSteps,
  ElTag,
  ElText,
} from "element-plus";
import { computed } from "vue";
import { useRoute } from "vue-router";

import ByDescription from "@/components/common/ByDescription.vue";
import ByDescriptionItem from "@/components/common/ByDescriptionItem.vue";

import useCategory from "@/hooks/useCategory";
import useRequest from "@/hooks/useRequest";
import { formatPrice, splitImageStr } from "@/utils";

import ApiActivity from "@/api/activity";
import ApiMerchant from "@/api/merchant";

import { TActivityApplied, TMerchant, TStall } from "@/global";
import useAduit from "./useAudit";


const route = useRoute();

// 活动报名详情
const { data, refresh: refreshAuditDetail, onFetchResponse } = useRequest<{
  detail: TActivityApplied;
}>(ApiActivity.activityApplyDetail, {
  defaultParams: { id: +route.params.id },
});

onFetchResponse(() => {
  runMerchant({ id: data.value!.detail.merchant_id });
  runStandDetail({ id: data.value!.detail.stand_id });
});

// 商户信息
const { data: merchantData, run: runMerchant } = useRequest<{
  merchant_detail: TMerchant;
}>(ApiMerchant.merchantDetail, {
  immediate: false,
});


const stepIndex = computed(() => {
  if (data.value) {
    const { audit_status, deposit_status } = data.value.detail;

    if (audit_status == 0) {
      return 1;
    } else {
      if (audit_status == 2) return 2;

      return deposit_status == 0 ? 2 : 3;
    }
  }
});

// 类别
const { map: categoryMap } = useCategory();

// 审核
const { isFetching, toAduit } = useAduit(refreshAuditDetail);

// 查询展位详情
const { data: standDetail, run: runStandDetail } = useRequest<{ detail: TStall; }>(ApiActivity.standDetail, { immediate: false });
</script>

<template>
  <ElRow :gutter="16">
    <ElCol :span="8">
      <ElCard header="商户信息">
        <ElSkeleton v-if="!merchantData" />

        <ByDescription v-else
                       :column="1"
                       label-width="6em"
                       label-align="right"
                       label-suffix="：">
          <ByDescriptionItem label="品牌Logo">
            <ElImage
                     class="w-100px h-100px rounded-md"
                     :src="merchantData.merchant_detail.merchant_logo_png" />
          </ByDescriptionItem>

          <ByDescriptionItem label="品牌名称">
            {{ merchantData.merchant_detail.merchant_title }}
          </ByDescriptionItem>
          <ByDescriptionItem label="类别">
            {{
              categoryMap?.get(merchantData.merchant_detail.merchant_type).title
            }}
          </ByDescriptionItem>
          <ByDescriptionItem label="地址">
            {{ merchantData.merchant_detail.province }}
            {{ merchantData.merchant_detail.city }}
            {{ merchantData.merchant_detail.district }}
          </ByDescriptionItem>

          <ByDescriptionItem label="联系人">
            {{ merchantData.merchant_detail.contact_name }}</ByDescriptionItem>
          <ByDescriptionItem label="联系电话">
            {{ merchantData.merchant_detail.contact_phone }}</ByDescriptionItem>
          <ByDescriptionItem label="微信号">
            {{ merchantData.merchant_detail.contact_wechat }}</ByDescriptionItem>
          <ByDescriptionItem label="邮箱">
            {{ merchantData.merchant_detail.contact_email }}</ByDescriptionItem>
          <ByDescriptionItem label="商品图片">
            <ElSpace wrap>
              <ElImage
                       v-for="(item, index) in splitImageStr(
                        merchantData.merchant_detail.product_img
                      )"
                       :key="index"
                       :src="item"
                       :preview-src-list="splitImageStr(merchantData.merchant_detail.product_img)
                        "
                       class="w-[76px] h-[76px] rounded-md" />
            </ElSpace>
          </ByDescriptionItem>
        </ByDescription>
      </ElCard>
    </ElCol>

    <ElCol :span="16">
      <ElCard header="报名状态">
        <ElSteps align-center :active="stepIndex">
          <ElStep
                  status="success"
                  title="已报名"
                  :description="data?.detail.create_time" />

          <ElStep
                  title="审核未通过"
                  status="error"
                  v-if="data?.detail.audit_status == 2"
                  :description="data?.detail.audit_time" />

          <template v-else-if="data?.detail.audit_status == 0">
            <ElStep title="待审核">
              <template #description>
                <ElPopconfirm title="审核"
                              confirm-button-text="通过"
                              cancel-button-text="不通过"
                              cancel-button-type="danger"
                              @confirm="toAduit(data.detail, 1)"
                              @cancel="toAduit(data.detail, 2)">
                  <template #reference>
                    <ElButton type="danger" :loading="isFetching">审核</ElButton>
                  </template>
                </ElPopconfirm>
              </template>
            </ElStep>
            <ElStep title="待付押金" />
          </template>

          <template v-else-if="data?.detail.audit_status == 1">
            <ElStep
                    status="success"
                    title="审核通过"
                    :description="data?.detail.audit_time" />

            <ElStep
                    v-if="data?.detail.deposit_status == 1"
                    status="success"
                    :title="`已付押金:¥` + formatPrice(data.detail.deposit_amount)"
                    :description="data.detail.deposit_time" />

            <ElStep v-else title="待付押金" />
          </template>
        </ElSteps>
      </ElCard>
      <ElCard class="mt-3" header="活动信息">



        <ByDescription label-suffix="：" :column="2">
          <ByDescriptionItem label="活动名称">
            {{ data?.detail.title }}</ByDescriptionItem>

          <ByDescriptionItem label="活动状态">
            <ElTag>🔥火热报名中</ElTag>
          </ByDescriptionItem>

          <ByDescriptionItem label="活动时间">
            {{ data?.detail.start_time }} - {{ data?.detail.end_time }}
          </ByDescriptionItem>

          <ByDescriptionItem label="活动地址">
            {{ data?.detail.address }}
          </ByDescriptionItem>

          <ByDescriptionItem label="预选展位">
            <ElSkeleton v-if="!standDetail?.detail" :rows="1" />

            <template v-else>
              <ElText>{{ standDetail!.detail.stand_title }}</ElText>
              <ElText size="small" tag="div">{{ standDetail!.detail.stand_desc }}</ElText>
            </template>
          </ByDescriptionItem>
        </ByDescription>
      </ElCard>
    </ElCol>
  </ElRow>
</template>
